<template>
  <v-app>
    <div class="home-banner">
      <div class="banner-container">
        <!--打印首页的一句话-->
        <div class="blog-title">
          {{ this.obj1.output }}{{ this.obj2.output }}<span class="typed-cursor">|</span>
        </div>
      </div>

      <div class="scroll-down" @click="scrollDown">
        <div style="margin-bottom: 10px">click</div>
        <i class="iconfont icon-feijizhizao scroll-down-effects"></i>
      </div>
    </div>

    <!--正文-->
    <v-container class="home-container">
      <v-row class="mt-5">
        <!--博客信息-->
        <v-col md="3" cols="12" class="animate__animated animate__fadeInLeft">
          <div style="position: sticky;top: 10px">
            <v-card class="pa-6 mx-auto text-center grey lighten-3">
              <v-avatar class="rounded-t-xl" size="130" color="grey">
                <v-img :src="user.avatar"></v-img>
              </v-avatar>
              <div class="text-title py-3">
                {{ user.nickname }}
              </div>
              <div class="text-min">
                {{ user.intro }}
              </div>
              <div style="width: 100%" class="d-flex justify-center mt-3">
                <v-tooltip bottom v-for="(item,i) in user.relations" :key="i">
                  <template v-slot:activator="{ on, attrs }">
                    <a style="text-decoration: none" :href="item.path" target="_blank"
                       class="iconfont mx-3" :class="item.iconfont" v-bind="attrs" v-on="on"
                    ></a>
                  </template>
                  <span>{{item.hint}}</span>
                </v-tooltip>
              </div>
            </v-card>
            <WebsiteMessage :userInfo="user"></WebsiteMessage>
          </div>
        </v-col>
        <!--文章列表-->
        <v-col md="9" cols="12" class="animate__animated text-center animate__fadeInRight">
          <v-card @click="toArticle(item.id)" v-for="(item,index) in articles" :key="index"
                  class="mx-auto mb-8 transition-swing card-hover px-4 article-card grey lighten-3 "
          >
            <v-card-text>
              <p class="text--primary" style="font-size: 1.2rem">
                {{ item.articleTitle }}
              </p>
              <div class="text--primary text-left article-content">
                <span class="text-h6">概述：</span> {{ item.articleContent }}
              </div>
            </v-card-text>
            <v-card-actions style="position: absolute; bottom: 0">
              <v-chip
                  color="cyan"
                  label
                  text-color="white"
              >
                <v-icon left>
                  mdi-label
                </v-icon>
                {{ item.categoryName }}
              </v-chip>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
import EasyTyper from 'easy-typer-js'
import {marked} from 'marked'
import WebsiteMessage from "@/components/rightSide/WebsiteMessage";

export default {
  components: {WebsiteMessage},
  methods: {
    toArticle(id){
      //转到文章页
      this.$router.push({path:'/article',query:{id:id}})
    },
    initArticle() {
      this.postRequest(this.api.article + "getHomeArticles", this.paging).then(res => {
        let data = res.data.object
        // 去除markdown标签
        data.forEach(item => {
          item.articleContent = marked(item.articleContent)
              .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '')
              .replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ')
              .replace(/ /g, ' ').replace(/>/g, ' ');
        });
        this.articles = res.data.object
      })
    },
    showText() {
      //获取一言
      fetch('https://v1.hitokoto.cn').then(res => {
        return res.json()
      }).then(({hitokoto}) => {
        this.delay = Array.from(hitokoto).length * this.obj1.speed
        this.initTyped(hitokoto)
      }).catch(err => {
        console.error(err)
      })
    },
    initTyped(input, fn, hooks) {
      const obj1 = this.obj1
      const typed1 = new EasyTyper(this.obj1, input, this.rollBackShow(), hooks)
    },
    rollBackShow() {
      //一言输出完回滚事件
      setTimeout(() => {
        const obj2 = this.obj2
        const typed2 = new EasyTyper(this.obj2, "\t——君役的博客", null, null)
      }, this.delay)
    },
    //往下划
    scrollDown() {
      window.scrollTo({
        behavior: "smooth",
        top: document.documentElement.clientHeight
      });
    },
  },
  computed:{
    user(){
      return this.$store.state.user
    }
  },
  data: () => {
    return {
      articles: [],
      paging: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        keyWords: "",
      },
      delay: 1000,
      obj1: {
        output: '',
        isEnd: false,
        speed: 350,
        singleBack: false,
        sleep: 10,
        type: 'custom',
        backSpeed: 60,
        sentencePause: false,
      },
      obj2: {
        output: '',
        isEnd: false,
        speed: 200,
        singleBack: false,
        sleep: 10,
        type: 'custom',
        backSpeed: 60,
        sentencePause: false,
      },
    }
  },
  created() {
    this.showText()
    this.initArticle()
  },
}
</script>

<style scoped>
.website-message>div{
  padding: 5px;
}

.article-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

@media (min-width: 760px) {
  .blog-title {
    font-size: 2rem;
  }

  .home-container {
    max-width: 80%;
    margin: 100vh auto 28px auto;
    padding: 0 5px;
  }

  .article-card {
    height: 300px;
    width: 100%;
  }
}

@media (max-width: 759px) {
  .blog-title {
    font-size: 26px;
  }

  .home-container {
    max-width: 99%;
    margin: 100vh auto 0 auto;
  }

  .article-card {
    height: 50vh;
  }
}

.banner-container {
  margin-top: 43vh;
  line-height: 1.5;
  color: #eee;
}

.scroll-down i {
  font-size: 2rem;
}

.scroll-down {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.scroll-down-effects {
  position: relative;
  color: #eee !important;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
  line-height: 1.5;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  animation: scroll-down-effect 1.5s infinite;
}

.home-banner {
  background: url(../../assets/img/home.png) center center / cover no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-attachment: fixed;
  text-align: center;
  color: #fff !important;
  animation: home-banner-transiton 1s ease;
  animation-iteration-count: 1;
}

@keyframes home-banner-transiton {
  0%{
    top: -50px;
  }
  100%{
    top: 0;
  }
}

@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
}
</style>

<style lang="stylus">
.typed-cursor
  margin-left: 10px
  opacity: 1
  -webkit-animation: blink 0.7s infinite
  -moz-animation: blink 0.7s infinite
  animation: blink 0.7s infinite

@keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1

@-webkit-keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1

@-moz-keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1
</style>